<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link rel="stylesheet" href="./">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <!-- v-cloak 防止闪现 在Vue还未解析模板时，先将模板隐藏 -->
            <p >{{text}}</p>
            <p v-cloak>{{text}}</p>

            <p v-text="text1"></p>
            <p v-html="text1"></p>
            <!-- v-pre 跳过渲染 -->
            <p v-pre>{{text}}</p>
            <!-- v-once 只渲染一次 -->
            <p >{{text2}}</p>
            <p v-once>{{text2}}</p>
            <button @click="add">按钮</button>

        </div>
        <script src="../js/vue.js"></script>
        <script>
            const vm = new Vue({
                data:{
                    text:"强壮的",
                    text2:"强壮的",
                    text1:"<strong>强壮的</strong>"
                },
                methods:{
                    add(){
                        this.text2 += this.text2 ;
                    }
                }
            });
            vm.$mount("#app");
        </script>
    </body>
</html>